<template>
    <div class="guide">
        <!-- <van-swipe 
        class="my-swipe" 
        :autoplay="3000" 
        indicator-color="white">
            <van-swipe-item v-for="(l,i) in imgs" :key='i'>
                <img :src="l" class="gimg"  alt="">
                    <van-button  @click="gotowhere('app')" v-if="i==(imgs.length-1)" type="primary" class="gbtn tada">开启App旅程</van-button>
            </van-swipe-item>
        </van-swipe> -->
        <!-- <van-swipe 
        class="my-swipe" 
        :autoplay="3000" 
        indicator-color="white">
            <van-swipe-item v-for="(l,i) in banners" :key='i'>
                <img :src="l.imageUrl" class="gimg"  alt="">
                    <van-button  @click="gotowhere('app')" v-if="i==(banners.length-1)" type="primary" class="gbtn tada">开启App旅程</van-button>
            </van-swipe-item>
        </van-swipe> -->
        <!-- <my-swipe 
            class="my-swipe" 
            id="banner" 
            :options="options">
            <my-swipe-item  v-for="(l,i) in imgs" :key="i">
                <img :src="l" class="gimg"  alt="">
                <van-button  @click="gotowhere('app')" v-if="i==(imgs.length-1)" type="primary" class="gbtn tada">开启App旅程</van-button>
            </my-swipe-item>
        </my-swipe> -->
        <div class="down" @click="gotowhere('app')"> 剩余 {{num}} S </div>
        <my-swipe 
            class="my-swipe" 
            id="banner" 
            :options="options">
            <my-swipe-item  v-for="(l,i) in banners" :key="i">
                <img :src="l.imageUrl" class="gimg"  alt="">
                <van-button  @click="gotowhere('app')" v-if="i==(banners.length-1)" type="primary" class="gbtn tada">开启App旅程</van-button>
            </my-swipe-item>
        </my-swipe>
    </div>  
</template>

<script>

import {getYearWeek} from '@/utils'
var timer = null;
export default {
    data(){
        return {
            num:5,
            imgs:[
                require('@/assets/images/img1.jpg'),
                require('@/assets/images/img2.jpg'),
                require('@/assets/images/img3.jpg'),
                require('@/assets/images/img4.jpg'),
            ],
            banners:[
                
            ],
            options:{
                loop:true,
                autoplay:{
                    delay:2000
                },
                speed:2000,
                // effect : 'cube',   // 立体播放效果 
                // cubeEffect: {
                //     slideShadows: true,
                //     shadow: true,
                //     shadowOffset: 100,
                //     shadowScale: 0.6
                // },
                observer:true ,  // 异步监听swiper 数据改变  一旦改变就会去重新实例化swiper 
            }
        }
    },
    methods:{
        async getBanners(){
            let res = await this.$axios.get("http://47.104.209.44:3333/banner?type=0")
            console.log(res)

            // 在下次 DOM 更新循环结束之后执行延迟回调 
            // 延迟执行回调  setTimeOut 
            // 保证所有的虚拟DOM 完全载入成为真实DOM 之后再去执行回调 
            this.$nextTick(()=>{
                this.banners = res.data.banners.slice(0,5)
            })
        },
        timeDown(){
            timer = setInterval(()=>{
                if(this.num>0){
                    this.num--;
                }else{
                    clearInterval(timer)
                    timer =null;
                    this.gotowhere("app")
                }
            },1000)
        }
    },
    destroyed(){
        clearInterval(timer)
        timer =null;
    },
    created(){
        // 业务需求 
        // 一个星期内这个页面出现3次 
        // 周一到周天 
        var week = getYearWeek()   // 今年第几周 
        console.log(week)
        var localWeek = localStorage.getItem('week')  // 本地存储的week 
        if(localWeek){
            // 这个已经访问过 
            if(week==localWeek){
                localStorage.pcount++;
                if(localStorage.pcount>3){
                    this.gotowhere("app")
                }
            }else{
                // 已经过了1周 重置数据  
                localStorage.setItem('week',week)
                localStorage.setItem('pcount',1)
            }
        }else{
            // 第一次访问  
            localStorage.setItem('week',week)
            localStorage.setItem('pcount',1)
        }

    },
    mounted(){
        this.getBanners()
        this.timeDown()
        console.log("parent-mounted")
    }
}
</script>

<style lang="scss">

.gbox{
    width:100px; 
    height:100px;
    background: darkcyan;
    border:1px  solid darkblue;
}

.guide{
    width:100%;
    height:100%;
    position: relative;
    padding:0 !important;
     .down{
        position:absolute;
        left:20px;
        top:20px;
        border:1px solid #fff;
        color:#fff;
        width:70px;
        height:30px;
        border-radius:10px;
        text-align:center;
        line-height:30px;
        z-index:100;
  }
    .my-swipe{
        width:100%;
        height:100%;
        position: relative;
        .gimg{
            width:100%;
            height:100%;
        }
        .gbtn{
            position: absolute;
            bottom:100px;
            left:50%;
            transform: translateX(-50%);
            // animation:  tada  1s;
        }
    }
}
</style>